<template>
  <div class="container">
    <el-card shadow="hover" class="tableList-card">
      <div slot="header" class="clearfix">
        <h3>{{ title }}</h3>
      </div>
      <div class="compatiblePercent">
        <div class="compatiblePercentEcharts">
          <Echarts
            :id="echartsId"
            width="300px"
            height="200px"
            :options="option"
          />
        </div>
        <div style="width: 80px"></div>
        <el-table
          border
          v-if="title != '表校验结果'"
          :data="tableListData"
          :height="300"
        >
          <el-table-column prop="sourceName" label="源对象" />
          <el-table-column prop="sinkName" label="目标对象" />
          <el-table-column prop="timeConsuming" align="center" label="完成状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isSuccess" type="success">成功</el-tag>
              <el-tag v-else type="danger">失败</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          v-else
          border
          :data="tableListData"
          height="300px"
          style="width: 100%"
        >
          <el-table-column prop="sourceName" label="源表名" />
          <el-table-column
            prop="sourceRowCount"
            align="center"
            label="源行数"
          />
          <el-table-column
            prop="sourceColumnCount"
            align="center"
            label="源列数"
          />
          <el-table-column prop="sinkName" label="目标表名" />
          <el-table-column
            prop="sinkRowCount"
            align="center"
            label="目标行数"
          />
          <el-table-column
            prop="sinkColumnCount"
            align="center"
            label="目标列数"
          />
          <el-table-column prop="timeConsuming" align="center" label="完成状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isSuccess" type="success">成功</el-tag>
              <el-tag v-else type="danger">失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.isSuccess"
                size="mini"
                type="text"
                icon="el-icon-tickets"
                @click="handleDetail(scope.row)"
                v-hasPermi="['console:verificationReport:detail']"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog title="DDL查看" :visible.sync="dialogVisible" width="65%">
      <div>
        <CodeEditor
          :key="random"
          :editorHight="200"
          :readOnly="true"
          :codeData="codeData"
        />
        <el-table height="200px" border :data="funcDiffTableData">
          <el-table-column prop="name" label="名称"> </el-table-column>
          <el-table-column prop="level" label="状态"> </el-table-column>
          <el-table-column prop="desc" label="描述" />
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog title="查看列属性" :visible.sync="open" width="60%">
      <div>
        <el-table height="200px" :data="columnsTableData" style="width: 100%">
          <el-table-column prop="columnName" label="列名称" width="180">
          </el-table-column>
          <el-table-column prop="columnType" label="列类型" width="180">
          </el-table-column>
          <el-table-column prop="columnDisplaySize" label="列长度" />
          <el-table-column prop="columnComment" label="注释"> </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="校验结果"
      v-if="childTableData"
      :visible.sync="resultOpen"
      width="1200px"
    >
      <div class="total">
        <div class="total_top">
          <p>
            对比状态：<el-tag v-if="childTableData.isSuccess" type="success"
              >完成</el-tag
            ><el-tag v-else type="danger">失败</el-tag>
          </p>
          <p>
            耗时：<span>{{ childTableData.timeConsuming }}</span>
          </p>
        </div>
        <el-divider></el-divider>
        <div class="total_detail">
          <div class="left_source">
            <p style="margin-top: 0">
              源表名称：<span>{{ childTableData.sourceName }}</span>
            </p>
            <p style="margin-top: 0">
              源表行数量：<span>{{ childTableData.sourceRowCount }}</span>
            </p>
            <p style="margin-top: 0">
              源表列数量：<span>{{ childTableData.sourceColumnCount }}</span>
            </p>
            <p>错误原因：{{ childTableData.verifyErrorMsg }}</p>
          </div>
          <div class="right_sink">
            <p style="margin-top: 0">
              目标表名称：<span>{{ childTableData.sinkName }}</span>
            </p>
            <p style="margin-top: 0">
              目标表行数量：<span>{{ childTableData.sinkRowCount }}</span>
            </p>
            <p style="margin-top: 0">
              目标表列数量：<span>{{ childTableData.sinkColumnCount }}</span>
            </p>
          </div>
        </div>
      </div>
      <el-table
        border
        height="200px"
        v-if="childTableData.rowResult"
        :data="childTableData.rowResult.cols"
        style="width: 100%"
      >
        <el-table-column prop="sourceColName" label="源表名称" align="center" />
        <el-table-column prop="sourceColSize" label="源表大小" align="center" />
        <el-table-column prop="sourceColType" label="源表类型" align="center" />
        <el-table-column prop="sinkColName" label="目标表名称" align="center" />
        <el-table-column prop="sinkColSize" label="目标表大小" align="center" />
        <el-table-column prop="sinkColType" label="目标表类型" align="center" />
        <el-table-column prop="status" label="状态" align="center" />
        <el-table-column prop="sourceComment" label="源表注释" align="center" />
        <el-table-column
          prop="dataEqual"
          label="数据对比结果"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.dataEqual" type="success">成功</el-tag>
            <el-tag v-else type="danger">失败</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resultOpen = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Echarts from "@/components/Echarts/index.vue";
import CodeEditor from "@/components/CodeEditor/index.vue";

export default {
  name: "tableBlock",
  components: { Echarts, CodeEditor },
  props: {
    tableList: {
      default: () => [],
    },
    echartsId: {
      type: String,
      required: true,
    },
    title: {
      type: String,
    },
  },
  dicts: ["appraise_compatiblestatus"],
  data() {
    return {
      funcDiffTableData: [],
      random: "",
      open: false,
      option: {
        title: {
          text: "",
          left: "center",
          top: "center",
          textStyle: {
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "item",
          top: "center",
          left: "center",
        },
        legend: {
          orient: "vertical",
          top: "0%",
          left: "right",
        },
        series: [
          {
            name: "兼容性",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 0, name: "兼容", itemStyle: { color: "#91CC75" } },
              { value: 0, name: "不兼容", itemStyle: { color: "#FF7070" } },
            ],
          },
        ],
      },
      dialogVisible: false,
      codeData: "",
      columnsTableData: [],
      tableListData: null,
      childTableData: null,
      resultOpen: false,
      // title: null,
    };
  },
  created() {
    // this.title = this.$props.title;
    this.option.title.text = `兼容性${this.numConver(
      this.$props.tableList.successPercent
    )}%`;
    this.option.series[0].data[0].value = this.numConver(
      this.$props.tableList.successPercent
    );
    this.option.series[0].data[0].name = `成功${this.numConver(
      this.$props.tableList.successPercent
    )}%`;
    this.option.series[0].data[1].value = this.numConver(
      this.$props.tableList.failPercent
    );
    this.option.series[0].data[1].name = `失败${this.numConver(
      this.$props.tableList.failPercent
    )}%`;
    this.tableListData = this.$props.tableList.objectList;
  },
  methods: {
    handleDetail(row) {
      this.childTableData = row;
      this.childTableData.verifyErrorMsg =
        typeof this.childTableData.verifyErrorMsg == "string"
          ? this.childTableData.verifyErrorMsg
          : this.childTableData.verifyErrorMsg.join(",");
      this.resultOpen = true;
    },
    numConver(data) {
      return Number(data.split("%")[0]);
    },
    handleClick(row) {
      this.random = Math.random();
      this.funcDiffTableData = row.funcDiff;
      this.codeData = row.ddlSql;
      this.dialogVisible = true;
    },
    handleColumns(row, type) {
      this.columnsTableData = row[`${type}`];
      this.open = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.total {
  margin-bottom: 10px;
  .total_top {
    display: flex;

    p {
      padding: 0 5px;
      margin: 0;
    }
  }

  p {
    font-weight: 600;

    span {
      font-weight: 500;
    }
  }

  .total_detail {
    display: flex;
    padding: 0 5px;
  }

  .left_source,
  .right_sink {
    width: 50%;
  }
}
.container {
  width: 100%;
  padding: 15px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  h3 {
    margin: 5px 0;
    color: #5c5c5c;
    font-weight: 600;
    font-size: 16px;
  }

  p {
    margin: 0;
    padding: 0;
  }

  .tableList-card {
    width: 100%;
    margin-top: 10px !important;
  }

  .compatiblePercent {
    display: flex;
    height: 100%;
    justify-content: space-between;

    .compatiblePercentEcharts {
      display: flex;
      align-items: center;
    }
  }
}

::v-deep .el-card + .el-card {
  margin: 0;
}
</style>
